import React, { Component } from 'react';
import { ImageBackground, TextInput, View, Image, StatusBar, Text, TouchableOpacity, FlatList, RefreshControl, DeviceEventEmitter } from 'react-native';
import TabBarTitle from '../components/TabBarTitle';
import TabBarImage from '../components/TabBarImage';
import Colors from '../constants/Colors';
import { statusBarHeight, titleHeight, width, unitWidth } from '../constants/AdapterUtil';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import { LeftComponent, MyHeader } from '../components/MyHeader';
import { SubmitButton6 } from '../components/Button';
import MyListView from '../components/MyListView';
import { DeleteTextView, MyTextView } from '../components/MyTextView';
import { Rating, AirbnbRating } from 'react-native-elements';
import { api_order_workorder_newsDetail, api_order_workorder_newsList, api_order_workorder_updateNew } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';

export default class MessageScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        this.getData(1);
        this.messageRead();
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyHeader title='消息' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <MyListView
                    ref='MyListView'
                    list={this.state.list}
                    renderItem={this.getItem.bind(this)}
                    getList={this.getData.bind(this)}
                    canLoadMore={true}
                />
            </View>
        )
    }

    getItem({ item, index }) {
        if (!item.work_order_info) {
            return (
                <TouchableOpacity style={{
                    justifyContent: 'center',
                    width: width, paddingHorizontal: 10 * unitWidth, paddingVertical: 15 * unitWidth, backgroundColor: Colors.white
                }} activeOpacity={0.7} onPress={() => { this.props.navigation.navigate('MessageDetail', { id: item.id }) }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                        <Text style={{ fontWeight: 'bold', color: Colors.black, fontSize: 15 }}>{item.title}</Text>
                        <Text style={{ color: Colors.color99, fontSize: 15 }}>{item.createtime}</Text>
                    </View>
                    <MyTextView numberOfLines={3} style={{ color: Colors.color99, fontSize: 13, marginVertical: 8 * unitWidth }} content={item.content} />
                    <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                </TouchableOpacity>
            )
        } else {
            return (
                <TouchableOpacity style={{
                    justifyContent: 'center', width: width, alignItems: 'center',
                    paddingHorizontal: 10 * unitWidth, paddingVertical: 15 * unitWidth, backgroundColor: Colors.white
                }} activeOpacity={0.7} onPress={() => {
                    if (item.title == '邀请报价') {
                        this.props.navigation.navigate('DemandDetail', { id: item.work_order_info.id, type: 1, showOffer: 1 })
                    } else if (item.title == '报价通知') {
                        this.props.navigation.navigate('DemandDetail', { id: item.work_order_info.id, type: 0, showOfferList: 1 })
                    } else if (item.order_id) {
                        this.props.navigation.navigate('BidOrderDetail', { no: item.order_id.order_id })
                    } else {
                        this.props.navigation.navigate('DemandDetail', { id: item.work_order_info.id, type: 1 })
                    }
                }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: 338 * unitWidth }}>
                        <Text style={{ fontWeight: 'bold', color: Colors.black, fontSize: 15 }}>{item.title}</Text>
                        <Text style={{ color: Colors.color99, fontSize: 15 }}>{item.createtime}</Text>
                    </View>
                    <View style={{
                        width: 338 * unitWidth, height: 90 * unitWidth, flexDirection: 'row', alignItems: 'center', overflow: 'hidden',
                        backgroundColor: Colors.colorF5, borderRadius: 5, alignSelf: 'center', marginTop: 10 * unitWidth
                    }}>
                        <Image style={{ width: 115 * unitWidth, height: 90 * unitWidth }} source={{ uri: item.work_order_info.picture }} resizeMode='stretch' />
                        <View style={{ alignItems: 'flex-start', marginLeft: 7 * unitWidth }}>
                            <Text style={{ color: Colors.black, fontSize: 15 }}>{item.work_order_info.title}</Text>
                            <Text style={{ color: Colors.color99, fontSize: 13, marginTop: 7 * unitWidth }}>加工数目：{item.work_order_info.total_count}</Text>
                            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * unitWidth }}>
                                <Image style={{ width: 13 * unitWidth, height: 16 * unitWidth }} source={require('../res/syss_dddw.png')} resizeMode='stretch' />
                                <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>地区：{item.work_order_info.province + '   ' + item.work_order_info.city}</Text>
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * unitWidth }}>
                                <Image style={{ width: 14 * unitWidth, height: 14 * unitWidth }} source={require('../res/fws_clsj.png')} resizeMode='stretch' />
                                <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>截止报价日期：</Text>
                                <Text style={{ color: Colors.colorOrange, fontSize: 13, marginLeft: 5 * unitWidth }}>{item.work_order_info.end_date}</Text>
                            </View>
                        </View>
                        <View style={{ alignSelf: 'flex-start', alignItems: 'center', position: 'absolute', right: 15 * unitWidth }}>
                            <Text style={{ color: Colors.color66, fontSize: 13, marginTop: 3 * unitWidth }}>{item.work_order_info.createtime}发布</Text>
                        </View>
                    </View>
                    <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                </TouchableOpacity>
            )
        }
    }

    //获取工单信息
    getData(page) {
        let params = {
            page: page,
        }
        postFetch(api_order_workorder_newsList, params, {
            success: (response) => {
                if (page == 1) {
                    this.setState({
                        list: response.result.list,
                    }, () => {
                        this.refs.MyListView.onHasMore();
                    })
                } else {
                    if (response.result.list && response.result.list.length > 0) {
                        this.setState({
                            list: this.state.list.concat(response.result.list),
                        }, () => {
                            this.refs.MyListView.onHasMore();
                        })
                    } else {
                        this.refs.MyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //设置消息已读
    messageRead() {
        let params = {

        }
        postFetch(api_order_workorder_updateNew, params, {
            success: (response) => {

            },
            fail: (response) => {

            }
        })
    }
}
